<template>
  <div class="host-list page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <navbar :title="title"></navbar>
    <!-- 导航 -->
    <!-- <van-nav-bar
      title="主播列表"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <!-- 主播列表 -->
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div
          class="host-list-item"
          v-for="(item, index) in hostListBox"
          :key="index"
          @click="goTo(item)"
        >
          <div class="host-img">
            <img :src="item.img" alt="" />
          </div>
          <div class="host-content">
            <div class="userbox">
              <div class="user-name">{{ item.userName }}</div>
              <img :src="item.tags" alt="">
            </div>
            <div class="user-content">{{ item.content }}</div>
          </div>
        </div>
      </van-pull-refresh>
      <div class="getMore" v-show="show">
        <div class="more" v-show="more" @click="getMore">
          点击加载更多
        </div>
        <div class="noMore" v-show="!more">
          没有更多了
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHost } from "./api";

export default {
  data() {
    return {
      title : "主播列表",
      hostListBox: [
        /* {
          img: "https://img2.baidu.com/it/u=1873343519,2672110142&fm=26&fmt=auto",
          userName: "东哥说书",
          tags: "快手",
          content:
            "8年汽车评测达人大中华区汽车资源总裁 全国帮寻低价优质汽车车 每晚不定时直播 发布特惠团购11111",
          id: "3418f3374a0a60ad2dc024f8d7af2dd2",
        }, */
      ],
      isLoading: false,
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:'',
      page: 1,
      limit: 10,
      more: true,
      show: true
    };
  },
  methods: {
    // 导航左边按钮 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取主播列表
    async getHostData() {
      let info = {
        page: this.page,
        limit: this.limit
      }
      const { data } = await getHost(info)
      console.log(data);
      data.celebrityMobileVideos.forEach((item) => {
        let a = {
          userName: item.celebrityList.authorName,
          content: item.celebrityList.remark,
          img: item.celebrityList.images,
          tags: item.pName,
          id: item.celebrityList.id,
        }
        this.hostListBox.push(a)
      })
      if(data.currPage === data.totalPage) {
        this.more = false
      }
      // this.show = true
    },
    // 跳转页面
    goTo(n) {
      let id = n.id;
      console.log(id);
      this.$router.push({
        name: "hostDetail",
        query: {
          id: id,
        },
      })
    },
    // 下拉刷新
    onRefresh() {
      this.hostListBox = []
      this.page = 1
      this.getHostData()
      this.isLoading = false
    },
    // 点击加载更多
    getMore() {
      console.log('more')
      this.page++
      this.getHostData()
    },
    getData() {},
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    }
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 修改页面标题
    document.title = "主播列表";
    // 获取路由链接上拼接的token值
    this.getTokenInUrl();
    this.getHostData();
  },
  mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:white')
    }
};
</script>

<style scoped lang="less">
.getMore{
  text-align: center;
  font-size: 14px;
  color: #999999;
  padding: 16px;
  letter-spacing: 2px;
  div{
    // padding-bottom: 10px;
  }
}
.special-box {
  background-color: black;
  color: white;
}
.host-list-item {
  display: flex;
  // justify-content: center;
  align-items: center;
  margin: 0 16px;
  padding: 20px 0;
  // height: 100px;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  .host-img {
    flex: 2;
    text-align: center;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
  }
  .host-content {
    flex: 7;
    // background-color: pink;
    padding-right: 10px;
    .userbox {
      display: flex;
      .user-name {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }
      img{
        width: 40px;
        height: 15px;
      }
    }
    .user-content {
      width: 100%;
      padding-top: 8px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/
      -webkit-box-orient: vertical;
    }
  }
}
</style>
<style lang="less">
.van-nav-bar .van-icon {
  color: black;
}
.van-nav-bar__title {
  font-size: 17px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
}
</style>
